<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html  style="text-align:center;">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.4, user-scalable=no" />  <!-- 移动端用户不可缩放页面 -->
  <title>华工xx同乡会</title>
  <link rel="stylesheet" type="text/css" href="css/ActionHomePage/style.css" />
  <script src="js/public/jquery-2.1.4.min.js"></script>
  <script src="js/ActionHomePage/singleActionInfo/singleActionInfoScript.js"></script>
  <script src="js/ActionHomePage/script.js"></script>
  <script src="js/public/publicScript.js"></script>  
  <script type="text/javascript">
  window.id = '<% out.print(session.getAttribute("id")); session.removeAttribute("id");%>';
  window.page = 0;
  window.pageSize = 16;
  window.count = 0;
  
  window.onload = function(){
    loadLoginInfo();
    loadAlbumInfo();  
  }
  
  
  function loadLoginInfo(){
	  $.ajax({
			url:'CheckLoginInfo',     
			datatype: "json", 
			type: "GET",     
			contentType: "application/json",     
			success:function(data){
				setLoginBar(data);
			},
			error:function(){
				alert('数据加载失败...服务器连接失效或者请检查网络连接是否正常...')
			}
	  });	    
}

function setLoginBar(data){
	 if(data['succ']=="true"){
	     $("#LoginBar").empty();
	     var ac = "<div class=\"barEl\" onmouseover=\"cc($(this))\" onmouseout=\"ccb($(this))\" onclick=\"window.location='CheckUserInfo';\"  style=\"color:#00CCFF;\">"+data['user_account']+"</div>&nbsp;&nbsp;&nbsp;";
	     var logOut = "<div class=\"barEl\" onmouseover=\"cc($(this))\" onmouseout=\"ccg($(this))\" onclick=\"window.location='LoginOut';\" style=\"color:#CCFF00;\">退出</div>&nbsp;&nbsp;&nbsp;";
	     $("#LoginBar").html(ac+logOut);
	 }
 }
 
  function loadAlbumInfo(){
	  $.ajax({
			url:'CheckAlbum?aid='+window.id,     
			datatype: "json", 
			type: "GET",     
			contentType: "application/json",     
			success:function(data){
				addAlbumInfo(data);
			},
			error:function(data){
				alert('数据加载失败...服务器连接失效或者请检查网络连接是否正常...')
			}
	  });	  
  }
  
  function addAlbumInfo(data){
	  var album_name = data['result']['album_name'];
	  var add_time = getTimeFromTStamp(data['result']['add_time']);
	  var intro = data['result']['introduction'];
	  var pics = data['result']['album_pics'];
	  var content = "";
	  for(var i=0;i<pics.length;i++){
		   var head = "<div class=\"AlbumInfo\">";
		   var img = "<img class=\"intro\" style=\"width:320px;height:200px;\" onmouseover=\"addMedia($(this));$('#i"+i+"').toggle('fast');\" onmouseout=\"removeMedia($(this));$('#i"+i+"').toggle('fast');\" style=\"width:100%;height:100%;box-shadow: 0px 0px 18px 0px;\" "+
		             "src=\""+getThumb(pics[i]['url'],"320200")+"\" "+
		             "onclick=\"window.location='"+ "pfs?p=ActionHomePage/albumPic.jsp&id="+window.id+"&pid="+pics[i]['id']+"';\" "+"/><br/><br/>";
	       var rend = "</div>";
	       content += (head+img+rend);
	  }
	  $("#album_name").html(album_name);
	  $("#album_add_time").html(add_time);
	  $("#album_intro").html(intro);
	  $("#album_list").empty();
	  $("#album_list").html(content);	  
  }
  
  function loadAlbums(){
	  $.ajax({
			url:'CheckAllAlbums?page='+window.page+'&pageSize='+window.pageSize,     
			datatype: "json", 
			type: "GET",     
			contentType: "application/json",     
			success:function(data){
				addAlbumLists(data);
			},
			error:function(data){
				alert('数据加载失败...服务器连接失效或者请检查网络连接是否正常...')
			}
	  });		  
  }
  
  function addAlbumLists(data){
	 $("#album_list").empty();
	 window.count = parseInt(data['result']['count']);
	 var content = "";
	 for(var i=0;i<data['result']['result'].length;i++){
         var vid = "i"+i;
		 var top = "<div class='AlbumInfo' style=\"margin-right:10px;\">";
         var img_src = getThumb(data['result']['result'][i]['top_pic'],"320200");
         var top_pic = "<img class='intro' style='width:320px;height:200px;' onmouseover='addMedia($(this));$(\"#"+vid+"\").toggle(\"fast\");' onmouseout='removeMedia($(this));$(\"#"+vid+"\").toggle(\"fast\");' style='width:100%;height:100%;box-shadow: 0px 0px 18px 0px;' src='"+img_src+"'/><br/><br/>";
         var album_id = data['result']['result'][i]['id'];
         
         var head1 = "<div id='"+vid+"' style='display:none;'>";
         var album_name = "<span>" + data['result']['result'][i]['album_name'] + "</span><br/>";       
		 var add_time = "<img style=\"width:25px;height:25px;vertical-align:middle;\" src=\"../../image/public/add_time.png\" /><span style=\"vertical-align:middle;\" ><strong>" + getTimeFromTStamp(data['result']['result'][i]['add_time']) + "</strong></span><br/>";		 
		 var rend1 = "</div>";
		 
		 var rend = "</div>";
		 content += (top + top_pic + head1 + album_name + add_time + rend1 + rend);
     }	
     $("#album_list").html(content); 
  }
  
  window.onresize=function(){
 	 var w=window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;
      var _w = parseInt(w);   //获取屏幕宽度
      if(_w>1200){
 		 var v = (_w -1200)/2;
 		 _w = 1200;
 		 $("#wrap").css("width","1200px");
 		 $("#wrap").css("margin-left",(v-8)+"px");
         $("#wrap").css("margin-right",(_w+v-8)+"px");
         
         $(".blackC_t").css("width","1200px");
         $(".blackC_t").css("height","120px");         
         $("#tbar").css("width","1200px"); 
         $("#tbar").css("height","120px"); 
         
      }else{
 		 $("#wrap").css("width","100%");
 		 $("#wrap").css("margin-left",-8+"px");
         //$("#wrap").css("margin-right",-8+"px");
         
         $(".blackC_t").css("width",_w+"px");
         $(".blackC_t").css("height",(_w*0.1)+"px");
         $("#tbar").css("width",_w+"px");
         $("#tbar").css("height",(_w*0.1)+"px");
      }
  }
  </script>
  <style type="text/css">
	  .intro{
	  margin:30px 0px 0px 0px;
	  width:320px;
	  height:200px;
	  text-align:center;
	  cursor:pointer;
	  transition:box-shadow 0.2s,text-shadow 0.2s,font-size 0.2s,width 0.2s,height 0.2s;
	  -moz-transition:box-shadow 0.2s,text-shadow 0.2s,font-size 0.2s,width 0.2s,height 0.2s; /* Firefox 4 */
	  -webkit-transition:box-shadow 0.2s,text-shadow 0.2s,font-size 0.2s,width 0.2s,height 0.2s; /* Safari and Chrome */
	  -o-transition:box-shadow 0.2s,text-shadow 0.2s,font-size 0.2s,width 0.2s,height 0.2s; /* Opera */  
	}

	.intro:hover{
	  box-shadow:0px 0px 18px 0px;
	  text-shadow: 0px 0px 9px;
	  border-radius:6px;
	  width:360px;
	  height:225px;
	}
  </style>
</head>

<body style="width:100%;height:100%;background-color:#00FF00;">
   <div id="wrap" style="width:100%;margin-top:-8px;margin-left:-8px;height:100%;">
     <div class="floatInfo" onclick="clickFI($(this));" onmouseover="ccb($(this));" onmouseout="cc_1($(this));">
     </div>
   	 <div class="blackC_t">
	 </div>
     <div id="tbar" class="topbar">
	  <div style="display:inline;">
	     <img style="max-width:8.296%;max-height:80%;vertical-align: middle;width:8.296%;height:80%;" src="image/homepage/u6.png"/>
	  </div>
	  <div style="font-family:微软雅黑;color:#FF9900;display:inline;">
	     <div style="display:inline;color:#00FF00;">
		   <span>
	          <strong>华工xx同乡会</strong>
	       </span>
		 </div>
		 <div style="padding-left:18%;display:inline;">
		   <div class="barEl" onmouseover="cc($(this))" onmouseout="ccb($(this))"style="color:#00CCFF;" onclick="window.location = 'http://139.129.24.81:8082/scuthnhtml/html/homepage/homepage.html';">首页</div>&nbsp;&nbsp;&nbsp;
           <div class="barEl" onmouseover="cc($(this))" onmouseout="ccg($(this))"style="color:#CCFF00;" onclick="window.location = 'http://139.129.24.81:8082/scuthnhtml/html/ActionHomePage/actionHomePage.html';">活动中心</div>&nbsp;&nbsp;&nbsp;
           <div class="barEl" onmouseover="cc($(this))" onmouseout="ccr($(this))"style="color:#FF9900;">资讯</div>&nbsp;&nbsp;&nbsp;
           <div id="LoginBar" style="display:inline-block;">
              <div class="barEl" onmouseover="cc($(this))" onmouseout="ccb($(this))" onclick="window.location='pfs?p=login/login.jsp';" style="color:#00CCFF;">登录</div>&nbsp;&nbsp;&nbsp;              
	 	      <div class="barEl" onmouseover="cc($(this))" onmouseout="ccg($(this))" onclick="window.location='pfs?p=register/register.jsp';" style="color:#CCFF00;">注册</div>&nbsp;&nbsp;&nbsp;
           </div>        
		 </div>
	  </div>
     </div>
     <div id="top" style="background-color:#00FF00;text-align:left;width:100%;">
       <div>
       </div>
       <div style="padding:10% 0% 10% 0%;color:#FFFFFF;">
         <div style="cursor:pointer;display:inline;padding" onclick="window.location='html/ActionHomePage/albumHomePage.html';">
            <img style="vertical-align:middle;" src="image/ActionHomePage/u70.png"/>
            <span style="font-family:微软雅黑;font-size:1em;">
               <strong>返回活动相册主页</strong>
            </span>
         </div>
         <div class="xbi" style="display:inline;margin-left:25%;">
            <span style="font-family:微软雅黑;font-size:3em;">
               <strong>活动相册</strong>
            </span>
         </div>
       </div>
     </div>

     <div id="v" style="background-color:#FFFFFF;width:100%;font-family:Microsoft YaHei;">
       <div style="padding-top:5%;">
         <img style="vertical-align:middle;width:60px;height:60px;" src="image/public/album.png"/>
         <span id="album_name" class="bi" style="color:#999999;vertical-align: middle;">
           <strong>
                                        相册名称
           </strong>
         </span><br/><br/>
         <img style="width:25px;height:25px;vertical-align:middle;" src="image/public/add_time.png" />
         <span id="album_add_time" class="xbi"  style="vertical-align:middle;">
           <strong>
                                       发布日期
           </strong>
         </span><br/><br/>
         <span id="album_intro" class="si" style="color:#999999;vertical-align: middle;">
           <strong>
                                        相册介绍
           </strong>
         </span>
       </div>
	   <div id="album_list">
		   <div class="AlbumInfo" style="">
				<img class="intro" style="width:320px;height:200px;" onmouseover="addMedia($(this));$('#i1').toggle('fast');" onmouseout="removeMedia($(this));$('#i1').toggle('fast');" style="width:100%;height:100%;box-shadow: 0px 0px 18px 0px;" src="../../image/ActionHomePage/u66.jpg"/><br/><br/>
		   </div>
	   </div>
     </div>

     <div id="foot" style="font-family:微软雅黑;border-radius:6px;margin-top:-5%;box-shadow: 0px 0px 18px 0px;width:100%;height:30%;background-color:#CCCCCC;left:0px;bottom:0px;">   
       <div style="font-family:微软雅黑;margin-top:5%;">  
	     <div>
	        <a target="_blank" href="#"><span class="si">联系我们</span></a>
	     </div><br/>
	     <div style="font-family:微软雅黑;display:inline;">
		      <div class="barEl" onmouseover="cc($(this))" onmouseout="ccB($(this))"><span class="si">首页</span></div>&nbsp;&nbsp;&nbsp;
              <div class="barEl" onmouseover="cc($(this))" onmouseout="ccB($(this))"><span class="si">活动</span></div>&nbsp;&nbsp;&nbsp;
              <div class="barEl" onmouseover="cc($(this))" onmouseout="ccB($(this))"><span class="si">资讯</span></div>&nbsp;&nbsp;&nbsp;
              <div class="barEl" onmouseover="cc($(this))" onmouseout="ccB($(this))"><span class="si">管理员中心</span></div>&nbsp;&nbsp;&nbsp;
	     </div><br/>
	     <div>
	          <a target="_blank" href="http://www.scut.edu.cn/"><span style="color:#999999;" class="xsi">友情链接:华南理工大学官网</span></a>
	     </div><br/>
	     <div>
	        <span class="xsi">备案信息:xxxxxxxxxxxxxxxxxxxxxx</span>
	     </div>
	   </div>
     </div>
   </div>   
</body>

<script type="text/javascript">
	 var w=window.innerWidth
     || document.documentElement.clientWidth
     || document.body.clientWidth;
     var _w = parseInt(w);   //获取屏幕宽度
     
	 if(_w>1200){
		 var v = (_w -1200)/2;
		 _w = 1200;
		 $("#wrap").css("width","1200px");
		 $("#wrap").css("margin-left",(v-8)+"px");
         $("#wrap").css("margin-right",(_w+v-8)+"px");
         $(".blackC_t").css("width","1200px");
         $(".blackC_t").css("height",_w*0.1);
         $("#tbar").css("width","1200px"); 
         $("#tbar").css("height",_w*0.1);
	 }else{
		 $("#wrap").css("width","100%");
		 $("#wrap").css("margin-left",-8+"px");
         //$("#wrap").css("margin-right",_w+"px");
         
         $(".blackC_t").css("width",_w+"px");
         $(".blackC_t").css("height",_w*0.1);
         $("#tbar").css("width",_w+"px");  
         $(".blackC_t").css("height",_w*0.1);
	 }
</script>
</html>